<template>
  <div>
    <div id="news">
        <div class="SwiperBox" ref="SwiperBox" @mouseenter="MouseFun('移入')" @mouseleave="MouseFun('移出')">
            <!-- 图片 -->
            <div class="imgBox" :style="{left:`-${leftVal}px`,transition:`${ition}s`}">
              <img :src="item.imgUrl" v-for="(item,index) in imgList" :key="index" />
              <!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 -->
              <img :src="imgList[0].imgUrl" alt="">
            </div>
            <!-- 左箭头按钮 -->
            <div class="leftBtn" @click="throttle(PrevFun)">&larr;</div>
            <!-- 右箭头按钮 -->
            <div class="rightBtn" @click="throttle(NextFun)">&rarr;</div>
            <!-- 下方指示点容器 -->
            <div class="instBox">
              <div @click="instFun(index)" v-for="(item,index) in imgList.length" :key="index"
              :class="['inst',index==imgShow?'instActv':'']">
              </div>
            </div>
        </div>
        <div style="width: 450px">
            <div v-for="news of recentlyHighHeatNewsList" class="hignNews" :key="news.id" @click="handle(news.id)" >
              <img v-if="news.picture" :src="news.picture" class="avatar" width="180px">  
              <div>
                <div style="margin: 5px 0px 0px 5px;">
                  <span>{{ news.subject }}</span>
                </div>
                <div style="display: flex;">
                  <div style="margin: 55px 5px 5px 5px">
                    <i class="el-icon-document"></i>
                  </div>
                  <div style="margin: 55px 5px 5px 110px;font-size: 10px;">
                    <i>{{ news.createTime }}</i>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
    <div style="margin-left: 180px;background-color: white;padding-top: 30px;width: 1175px;padding-bottom: 50px;">
      <div style="margin-left: 15px; display: flex;align-items: center;">
        <i style="font-size: 30px;" class="el-icon-document"></i>
        <span style="font-size: 25px;">咨询</span>
      </div>
      <div style="margin-left: 15px;margin-right: 15px;">
        <hr/>
      </div>
      <div>
        <el-row>         
            <el-col :span="4" v-for="(item) in newsList" :key="item.id" :offset="1" style="height: 260px;width: 330px;">                
                <div class="newPicture" @click="changeNews(item.id)">                                        
                    <img v-if="item.picture" :src="item.picture" class="avatar" width="340px">
                    <p style="font-size: 18px;">{{ item.createTime }}</p>           
                    <div> 
                        {{ item.subject }}             
                    </div>            
                </div>            
            </el-col>        
		    </el-row>
      </div>
      <div class="loadMoreDiv"  v-if="pageSize < newsMaxCount"  @click="loadMoreNews()">
        <span class="loadMoreButton">点击加载更多</span>
      </div>
      <div style="height: 30px;background-color: rgb(246, 246, 246);margin-left: 100px;
            margin-right: 100px;padding-bottom: 30px;
            text-align: center;line-height:30px"  v-if="pageSize >= newsMaxCount">
        <span style="color: #006bb7;">没有更多了</span>
      </div>
    </div>
  </div>
  </template>

<script>
import newsApi from "@/api/news/news";
export default {
  data() {
    return {
      recentlyHighHeatNewsList: [],
      newsList: [],
      imgList: [
        {imgUrl: "http://120.46.203.113:9000/ly-bucket/2023/03/28/c04287ca-c191-4b84-915b-f7f0c78d1594.jpg"},
        {imgUrl: "http://120.46.203.113:9000/ly-bucket/2023/03/28/2bbc322f-a913-4971-b13c-27dbdf630ce9.jpg"},
        {imgUrl: "http://120.46.203.113:9000/ly-bucket/2023/03/28/e864fcc0-e03d-4d18-9536-b657e2768232.jpg"},
        {imgUrl: "http://120.46.203.113:9000/ly-bucket/2023/03/28/30f11d76-06a4-4d82-87f1-805b8407a249.jpg"},
        {imgUrl: "http://120.46.203.113:9000/ly-bucket/2023/03/28/95db0e55-1467-414c-ad29-c16b4f1f30b4.jpg"},
      ],
      leftVal:0,  // 轮播图盒子的偏移值
      flag:true, // 用来节流防止重复点击
      start:null, // 自动执行下一张定的时器
      imgWidth:700,  // 在这里填写你需要的图片宽度
      ition:0.8, // 设置轮播图过度时间
      imgShow:0, // 表示当前显示的图片索引
      pageNum: 1, //页码
      pageSize: 6, //每页记录数
      newsMaxCount: 0,
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    // this.imgWidth = this.$refs.SwiperBox.offsetWidth // 自动获取轮播图盒子宽度
    this.奥力给() // 偷偷告诉大家一个小秘密,JavaScript是原生支持中文命名函数或变量的哦
  },
  methods: {
    changeNews(id){
      let routeUrl = this.$router.resolve({
        path: '/shouye/news/newsDetail',
        query: {
          id: id
        }
      })
      window.open(routeUrl.href, '_blank')
      newsApi.newsHeatRaise(id)
      .then(response =>{})
    },
    loadMoreNews(){
      this.pageSize = this.pageSize + 6
      this.fetchData()
    },
    handle(id) {
      let routeUrl = this.$router.resolve({
        path: '/shouye/news/newsDetail',
        query: {
          id: id
        }
      })
      window.open(routeUrl.href, '_blank')
      newsApi.newsHeatRaise(id)
      .then(response =>{})
    },
    fetchData(){
      newsApi.recentlyHighHeatNews()
      .then((response) =>{
        this.recentlyHighHeatNewsList = response.data
      })
      newsApi.pageListDesc(this.pageNum,this.pageSize)
      .then((response) =>{
        this.newsList = response.data.records;
        console.log(this.newsList)
      })
      newsApi.newsCount()
      .then(response => {
        this.newsMaxCount = response.data
      })
    },
    // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
    MouseFun(type){// 停止定时器            // 重新执行定时器
      type=='移入'?clearTimeout(this.start):this.奥力给()
    },
    // 此为自动轮播定时器
    奥力给(){
        this.start = setInterval(()=>{
        this.NextFun()
      },1500)
    },
    // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
    throttle(fun) {
        if (this.flag) {
            this.flag = false;
            fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
          setTimeout(() => {
                this.flag = true;
            }, 1200); // 节流间隔时间
        }
    },
    // 上一张
    PrevFun(){
      if(this.leftVal==0){ // 判断显示的图片 是 第一张时执行
        // this.imgList.length是指循环图片数组的图片个数
        this.ition=0 // 将过渡时间变成0，瞬间位移到最后一张图
        this.imgShow=this.imgList.length-1 // 将高亮小点改为最后一张图
        this.leftVal=(this.imgList.length)*this.imgWidth // 瞬间移动
         setTimeout(()=>{  // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
           this.ition=0.8
           this.leftVal -= this.imgWidth
         },this.ition*1000)
      }else{ // 判断显示的图片 不是 第一张时执行
         this.ition=0.8
         this.leftVal -= this.imgWidth
         this.imgShow--
      }
    },
    // 下一张
    NextFun(){
      if(this.leftVal==(this.imgList.length-1)*this.imgWidth){ // 判断显示的图片 是 最后一张时执行
           this.ition=0.8
           this.leftVal+=this.imgWidth
           this.imgShow=0
         setTimeout(()=>{
           this.ition=0
           this.leftVal=0
         },this.ition*1000)
      }else{ // 判断显示的图片 不是 最后一张时执行
         this.ition=0.8
         this.leftVal+=this.imgWidth
         this.imgShow++
      }
    },
    // 点击小圆点
    instFun(index){
      this.ition=0.8
      this.leftVal=index*this.imgWidth
      this.imgShow=index
    },
  }
};
</script>

<style>
  .loadMoreDiv{
    height: 30px;
    background-color: rgb(246, 246, 246);
    margin-left: 100px;
    margin-right: 100px
    ;padding-bottom: 30px;
    text-align: center;
    line-height:30px
  }
  .loadMoreDiv:hover{
    background-color: rgb(108, 117, 213);
  }
  .loadMoreDiv:hover .loadMoreButton{
    color: white;
  }
 
  .loadMoreButton{
    color: #006bb7;
  }
  
  .newPicture{
    position: relative;
    cursor: pointer;
    overflow: hidden;
  }

  .newPicture img{
    transition: all 0.8s;
  }
  .newPicture img:hover {
      transform: scale(1.1);
  }
  .newPicture p{
    position: absolute;
    left: 45%;
    top: 60%;
    color: white;
  }
  .newPicture:hover{
    color: rgb(88, 162, 246);
  }
  .hignNews{
    display: flex;
    cursor: pointer;
    height: 120px;margin: 10px 5px 0px 5px;
    background: rgb(246, 246, 246);
  }
  .hignNews:hover{
    color: rgb(88, 162, 246);
  }
   /* 图片容器样式 */
  .SwiperBox {
    position: relative;
    width: 700px;
    height: 400px;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    margin-left: 20px;
  }
  .imgBox{
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 700px;
    height: 400px;
    display: flex;
    justify-content: flex-start;
  }
  /* 图片默认样式 */
  .imgBox img {
    flex-shrink: 0;
    width: 700px;
    height: 400px;
  }
   /* 两个按钮共有的样式,也可直接使用箭头图片替代 */
  .leftBtn,
  .rightBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(109, 109, 109, 0.445);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
  }
  .leftBtn {
    left: 10px;
  }
  .rightBtn {
    right: 10px;
  }
  /* 下方指示器盒子 */
  .instBox{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
  }
   /* 小圆点 */
  .inst{
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    margin-right: 8px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
  .inst:last-child{
    margin-right: 0px;
  }
  .instActv{
    border: 1px solid #ff0000;
    background: #ff0000;
  }
  #news{
    margin-left: 180px;
    padding-top: 15px;
    display: flex;
    background-color: white;
    width: 1175px;
  }
  #app{
    background: rgb(246, 246, 246);
    height: 100%;
    overflow: scroll;
  }

</style>